<script setup>
/**
 * & 文件引入区域
 */
import { onBeforeMount, ref } from "vue";

import { ToastFun } from "@/hook/toast";
import { getJWTFun } from "@/hook/jsrsasign";

import { payOrderCertificate, getItemOrderDetail } from "@/server/api/itemApi";
import { completedItemAPI } from "@/server/api/itemOrders";

import { orderStatus } from "@/stores/payStore";
import { useUseStore } from "@/stores/user";
import router from "@/router";
import { useI18n } from "vue-i18n";

/**
 * & 变量声明区
 */
let imgList = ref([]); // 图片回显数组
let formData = null; // 用于接收上传凭证的表单数据
let orderDetail = ref(null); // 订单详情
const { t } = useI18n();

/**
 * 获取订单详情
 */
const getOrderDetail = async () => {
  try {
    ToastFun("Loading", { duration: 1000 });
    let { data } = await getItemOrderDetail(orderStatus().itmePayReq.orderId);

    if (data.code == 200) {
      // 图片拼接
      if (data.data.certificateImag) {
        data.data.certificateImag =
          useUseStore().ing + data.data.certificateImag;
      }

      orderDetail.value = data.data;

      console.log(orderDetail.value);
      ToastFun(t("pay.success2"));
    } else {
      ToastFun("");
      router.back();
    }
  } catch {
    ToastFun("");
    router.back();
  }
};

/**
 * 获取图片函数
 */
const getImg = (file) => {
  formData = new FormData();
  formData.append("file", file.file);

  console.log(formData.get("file"));
};

/**
 * 上传支付凭证接口
 */
const payOrderFun = async () => {
  // 判断是否上传图片
  if (formData != null) {
    let token = getJWTFun(orderStatus().itmePayReq); // 生成token

    try {
      ToastFun("Loading", { duration: 1000 });
      let { data } = await payOrderCertificate(token, formData); // 接口请求

      // 判断返回状态是否成功
      if (data.code == 200) {
        console.log(data.data);
        ToastFun(t("pay.success2")); // 成功提示

        // 重新请求订单详情
        orderDetail.value = null;
        getOrderDetail();
      } else {
        ToastFun(""); // 失败提示
      }
    } catch {
      // 请求异常处理
      ToastFun("");
    }
  }
  // 未上传图片提示
  else {
    ToastFun("");
  }
};

/**
 * 过滤超过5m图片的函数
 */
const onOversize = () => {
  // 5MB还是3MB?
  // ToastFun("", { msg: "图片不能超过3m" });
  ToastFun("", { msg: t("upTip") });

};

onBeforeMount(() => {
  getOrderDetail(); // 获取订单详情
});
</script>

<template>
  <div class="pipayOrder" v-if="orderDetail">
    <div class="top">
      <ExchangeOrderTop />
    </div>

    <div class="content">
      <div class="user" v-if="false">
        <img src="" alt="" />
        <div class="name">{{ "name" }}</div>
      </div>

      <div class="form">
        <div class="item to">
          <div class="title">
            {{ $t("order.wait") }}
          </div>

          <div class="num">
            <div class="title">Pi</div>
            <span>{{ $route.query.price }}</span>
          </div>
        </div>
      </div>

      <div class="address">
        <div class="title">
          {{ $t("exchange.address") }}
        </div>

        <div class="text"></div>
        {{ orderDetail.piAddress || "not found" }}
      </div>

      <div class="voucher" v-if="orderDetail.orderStatus == 0">
        <div class="title">
          {{ $t("exchange.certificate") }}
        </div>

        <van-uploader :max-count="1" v-model="imgList" :after-read="getImg" @oversize="onOversize"
          :max-size="3000 * 1024" @delete="formData = null">
          <div class="updata">
            <img src="/images/Me/updataLogo.png" alt="" class="icon" />
            <span>Photos</span>
          </div>
        </van-uploader>

        <div class="question" v-if="false">
          <textarea name="" id="" cols="30" rows="5" :placeholder="$t('exchangeOrder.issuse')" />
          <van-uploader>
            <div class="updata">
              <img src="/images/Me/updataLogo.png" alt="" class="icon" />
              <span>Photos</span>
            </div>
          </van-uploader>
        </div>
      </div>

      <div class="img" v-if="orderDetail.orderStatus == 1">
        <div class="title">{{ $t("exchange.certificate") }}</div>

        <img alt="" v-lazy="orderDetail.certificateImag" />
      </div>
    </div>

    <div class="submit" @click="payOrderFun" v-if="orderDetail.orderStatus == 0">
      {{ $t("exchange.confirm") }}
    </div>

    <div class="submit" v-if="orderDetail.orderStatus == 1">
      {{ $t("exchange.waiting3") }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pipayOrder {
  position: relative;
  min-height: 100vh;
  max-height: 100vh;
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  >.content {
    padding: 24rem 16rem 80rem;

    >.user {
      display: flex;
      align-items: center;

      margin-bottom: 16rem;

      >img {
        width: 34rem;
        margin-right: 6rem;
      }

      >.name {
        color: #333;
        font-size: 16rem;
        font-weight: 500;
        line-height: 22rem;
      }
    }

    >.form {
      position: relative;

      >.item {
        margin-bottom: 24rem;

        >.title {
          font-size: 14rem;
          font-weight: 400;
          line-height: 20rem;
          color: #333;
          margin-bottom: 24rem;
        }

        >.num {
          line-height: 44rem;
          font-size: 32rem;
          font-weight: 500;

          display: flex;

          >.title {
            color: rgba(100, 46, 142, 1);
            margin-right: 10rem;
          }

          >span {
            color: rgba(51, 51, 51, 1);
          }
        }

        &.from {
          >.num .title {
            font-size: 16rem;
            font-weight: 400;
            line-height: 44rem;
          }
        }
      }
    }

    >.address {
      font-size: 16rem;
      font-weight: 400;
      line-height: 22rem;

      >div {
        margin-bottom: 16rem;
      }

      >input {
        width: 100%;
        border-bottom: 1rem solid #f0f0f0;
      }
    }

    >.voucher {
      font-size: 16rem;
      font-weight: 400;
      line-height: 22rem;

      >.title {
        margin-bottom: 24rem;
      }

      >.question {
        position: relative;
        border-radius: 16rem;
        padding: 12rem;
        background: #f5f5f5;

        >textarea {
          width: 100%;
          border: 0;
          background: transparent;
        }
      }

      .updata {
        width: 64rem;
        height: 64rem;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        font-size: 14rem;
        line-height: 20rem;
        color: rgba(255, 255, 255, 1);

        border-radius: 4rem;
        background: #ccc;

        >img {
          width: 14rem;
        }
      }
    }

    >.img {
      width: 100%;

      >.title {
        font-size: 16rem;
        font-weight: 400;
        line-height: 22rem;
        margin-bottom: 16rem;
      }

      img {
        width: 100%;
      }
    }
  }

  >.submit {
    position: fixed;
    bottom: 16rem;
    left: 0;
    right: 0;

    display: flex;
    justify-content: center;
    margin: 0 16rem;
    padding: 15rem 0;
    background: #642e8e;
    border-radius: 26rem;

    font-size: 16rem;
    font-weight: 500;
    line-height: 22rem;
    color: #fff;
  }
}
</style>
